<template>
  <el-form-item :prop="prop" :label="label">
    <el-input v-bind="$attrs" :disabled="!isEdit" clearable :style="inputStyle" @keyup.enter="emits('keyupEnter')">
      <template #append v-if="append">
        <slot name="append" />
      </template>
    </el-input>
  </el-form-item>
</template>

<script lang="ts" setup>
// 简化表单中input的代码
/* 使用
<MkInput label='申请编号' v-model='ctx.entity.id' prop='id' :isEdit='ctx.isEdit' />
// 添加尾部按钮 :append="true"
<MkInput label='附件' v-model='ctx.entity.fuJianMingCheng' prop='fuJianMingCheng' :isEdit='ctx.isEdit'
  :append="true">
  <template #append>
    <el-button icon="ele-Download" size="small" text @click="downloadFile(ctx.entity.fuJianDiZhi)"></el-button>
  </template>
</MkInput>
*/
import { ElInput } from 'element-plus';
import { getInputWidth, filterArrayWithPinYin } from './shared';
defineOptions({
  name: 'MkInput',
})
const props = defineProps({
  prop: {
    type: String,
  },
  label: {
    type: String,
  },
  isEdit: {
    type: Boolean,
    default: true
  },
  append: { // 是否显示append
    type: Boolean,
    default: false
  },
  col: { // 控制宽度, 最多设置为3, 特殊情况可以设置为4
    type: Number,
    default: 1
  },
})

const { inputStyle } = getInputWidth(props.col);

// 解决@keyup.enter事件透传后执行了两次的问题
const emits = defineEmits(['keyupEnter'])
</script>

<style lang='scss' scoped></style>